<template>
	<view>
		<view class="orderbox u-radius-10 u-p-30" v-for="(item,index) in orderlist" :key="index">
			<view class="orderboxtop">
				<image src="../static/shop.png" class="shopicon u-m-r-20" mode=""></image>
				<text>{{item.yztitle||'暂无'}}</text>
			</view>
			<view class="orderboxmain u-m-tb-30 flex">
				<view class="orderboxmain_left">
					<image src="../static/shop.png" class="shoplogo u-m-r-30" mode=""></image>
					<view class="orderboxmain_left_content flex">
						<text class="big-title" v-if="bigcurrent==0">{{item.pickupcode}}</text>
						<!-- <text class="main-text" v-if="bigcurrent==1">驿站名称：{{item.yztitle}} </text> -->
						
						<text class="main-text"> <text v-if="bigcurrent==0">{{item.stationname||'暂无'}}</text> {{item.ordersn}}</text>
						<text class="main-text">手机尾号{{item.mobile.slice(-4)}} </text>
						<text class="main-text" v-if="bigcurrent==1">备注：{{item.remark}} </text>
						
					</view>
				</view>
				<!-- <view @click="Difference(item.ordersn)" class="wait white u-radius-10 main-text" style="flex-shrink: 0;"
					v-if="current==1&&item.status==1">
					补差价
				</view> -->
				<view  class="wait white u-radius-10 main-text " style="flex-shrink: 0;"
					v-if="current==0&&item.state==0">
					未接单
				</view>
				<view class="finish white u-radius-10 main-text"  style="flex-shrink: 0;" v-if="current==0&&item.state!=0">
					已接单
				</view>
				<view class="finish white u-radius-10 main-text"  style="flex-shrink: 0;" v-if="current==2">
					已送达
				</view>
				<view class="finish white u-radius-10 main-text"  style="flex-shrink: 0;" v-if="current==1&& bigcurrent==0">
					已取件
				</view>
				<view class="finish white u-radius-10 main-text"  style="flex-shrink: 0;" v-if="current==1&& bigcurrent==1 ">
					已寄件
				</view>
			</view>
			<view class="fail u-p-10 u-radius-5 u-font-26" v-if="current==3 ">
				原因：{{item.reason}}     
			</view>
			<view class="u-font-26 u-p-10 u-radius-5 " style="background-color: rgb(245, 108, 108); color: #fff;" @click="Difference(item.ordersn,item.price)" v-if="current==0&&item.status==1&&item.xg_status==1">
				点击补差价：原因快递类型不符已提升为{{item.type}}，需补交{{item.price}}元
			</view>
			<view class="flex u-m-tb-20" v-if="bigcurrent==1">
				<text style="flex-shrink: 0;">图片：</text>
				<scroll-view scroll-x="true" style="white-space: nowrap;" >
					<image class="u-m-20" style="width: 150rpx; height: 150rpx;" @click="preimg(i)" v-for="i in item.images" :src="$oss(i)"
						></image>
				</scroll-view>
			</view>
			
			
			<view class="flex u-m-tb-20" v-if="bigcurrent==0&&current==2">
				<text style="flex-shrink: 0;">图片：</text>
				<scroll-view scroll-x="true" style="white-space: nowrap;" >
					<image class="u-m-20" style="width: 150rpx; height: 150rpx;" @click="preimg(i)"  v-for="i in item.sd_imgs" :src="$oss(i)"
						></image>
				</scroll-view>
			</view>
			
			
			
		</view>
		<u-popup :show="show" @close="close" :round="10" mode="center" :closeOnClickOverlay='true' @open="open">
			<view style="width: 600rpx;">
				<view class="pricebox">
					<text class=" u-m-tb-20" >补差价</text>
					<view class="u-font-46 u-m-tb-20 " style="font-weight: bold;">￥{{buprice}}({{buprice}}金币)</view>
					<u-line></u-line>
				</view>
				<u-radio-group  iconPlacement="right" placement="column" >
					<u-radio :customStyle="{margin: '18px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
				<view class="u-p-20 u-radius-20 sure" @click="paydiff">
					支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['current', 'bigcurrent', 'orderlist'],
		
		name: "student",
		data() {
			return {
				show: false,
				buprice:0,
				orderno:'',
				type:'',
				radiolist1: [{
						name: '金币',
						disabled: false
					},
					{
						name: '微信',
						disabled: false
					}

				],
			};
		},
		mounted() {
			
		},
		methods: {
			preimg(item) {
				uni.previewImage({
					urls: [this.$oss(item)]
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			
			radioChange(n) {
				console.log('radioChange', n);
				if(n=='金币'){
					this.type = 3
				}else{
					this.type = 1
				}
			},
			Difference(orderno,price) {
				this.buprice = price
				this.orderno = orderno
				this.show = true
			},
			paydiff(){
				if(!this.type){
					this.$toast('请选择支付方式~')
					return
				}
				this.$api.post('/Delivery/xgontpayorder',{
					ordersn:this.orderno,
					paytype:this.type,
					op:this.bigcurrent+1
				}).then(res=>{
					this.$toast(res.msg)
					this.show = false
					if(this.type==1){
						this.$pay(res.data).then(res=>{
							this.show = false
							uni.$emit('upgg',1)
						})
					}else{
						uni.$emit('upgg',1)
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		@mixin flex {
			display: flex;
			align-items: center;
		}

		background-color: #f4f4f4;

		.orderbox {
			width: 686rpx;
			margin: 30rpx auto;
			box-sizing: border-box;
			background-color: #fff;

			.orderboxtop {
				@include flex;

				.shopicon {
					width: 50rpx;
					height: 50rpx;

				}
			}

			.orderboxmain {
				justify-content: space-between;
				align-items: start;

				.orderboxmain_left {
					@include flex;

					.shoplogo {
						width: 130rpx;
						height: 130rpx;
					}

					.orderboxmain_left_content {
						// height: 130rpx;
						
						justify-content: space-between;
						flex-direction: column;
					}
				}

				.wait {
					background-color: orange;
					padding: 10rpx 20rpx;
				}

				.finish {
					background-color: $mian-bg;
					padding: 10rpx 20rpx;
				}
			}
		}
	}

	.fail {
		color: #e6a23c;
		background-color: rgb(256, 242, 235);
	}
	.sure{
		
		width: 300rpx;
		margin: 30rpx auto;
		background-color: rgb(5, 193, 96);
		color: #fff;
		text-align: center;
	}
	.pricebox{
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>